.reaction-summary-item {
	padding-right: 0.7em !important;
	padding-left: 0.7em !important;
}

button.reaction-summary-item { /* `button` excludes the "Add reaction" icon */
	border-top: 1px solid #e1e4e8; /* Required when the second line is longer than the first line */
	border-bottom: 1px solid #e1e4e8; /* Required when the first line is longer than the second line */
	margin-bottom: -1px; /* Makes up for `order-bottom` */
}

.comment-reactions .js-pick-reaction {
	margin-top: -1px; /* Makes up for `.reaction-summary-item {border-top}` */
}

.reaction-summary-item.user-has-reacted {
	--background: #f2f8fa;
}

.reaction-summary-item a {
	display: inline-block;
	width: 2em;
	height: 2em;
	margin-top: -0.3em;
	margin-left: -0.5em;
	vertical-align: middle;
	background: #efefef; /* Placeholder before the images load */
	box-shadow: 0 0 0 2px var(--background, #fff);
	font-size: 10px; /* Base sizer */
}

.reaction-summary-item a:first-of-type {
	margin-left: 0.5em;
}

.review-comment .reaction-summary-item a {
	font-size: 9px;
}

.discussion-post .reaction-summary-item a {
	margin-top: -1px;
}

/* This image will start at height:0 and will expand once loaded, covering the gray placeholder */
.reaction-summary-item a img { /* `a` required for #3237 */
	max-width: 100%;
	background-color: var(--background);
}
